<template>
  <div class="ensureAccountContainer">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="账户核实" prop="verifyType">
        <el-select v-model="ruleForm.verifyType" placeholder="请选择">
          <el-option
            v-for="item in verifyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="账户ID" prop="userID" v-if="ruleForm.verifyType && ruleForm.verifyType == 'userID'">
        <el-input v-model="ruleForm.userID" />
      </el-form-item> -->
      <el-form-item label="用户名" prop="username" v-if="ruleForm.verifyType && ruleForm.verifyType == 'nameAndPhone'">
        <el-input v-model="ruleForm.username" clearable />
      </el-form-item>
      <el-form-item label="手机号" prop="phone" v-if="ruleForm.verifyType && ruleForm.verifyType == 'nameAndPhone'">
        <el-input v-model="ruleForm.phone" clearable />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, watch, onMounted } from 'vue';
import type { FormInstance, FormRules } from "element-plus";
// store
import useForgetPwd from "@/store/forgetPwd";
import { storeToRefs } from 'pinia';

const forgetPwdStore = useForgetPwd();
const {
  verifyType,
  username,
  phone
} = storeToRefs(forgetPwdStore);

onMounted(() => {
  if(verifyType.value) {
    ruleForm.verifyType = verifyType.value;
  }
  if(username.value) {
    ruleForm.username = username.value;
  }
  if(phone.value) {
    ruleForm.phone = phone.value;
  }
})

interface RuleForm {
  verifyType: "nameAndPhone" | '';
  username?: string;
  phone?: string;
}

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  verifyType: "",
  username: "",
  phone: "",
});

const rules = reactive<FormRules<RuleForm>>({
  verifyType: [{ required: true, message: "请选择验证方式", trigger: "blur" }]
});

const verifyOptions = [
  { label: "用户名和手机号", value: "nameAndPhone" }
];

// 切换验证方式
// const nowVerify = computed(() => {
//   return ruleForm.verifyType == "userID";
// });

watch(() => ruleForm, () => {
  // if (nowVerify.value) {
  //   // 是userId的时候：清除用户名和手机号
  //   ruleForm.username = "";
  //   ruleForm.phone = "";
  // } else {
  //   // 不是userId的时候：清除用户ID
  //   ruleForm.userID = "";
  // }
  forgetPwdStore.setAccountData(ruleForm)
}, {
  deep: true
})

</script>

<style lang="scss" scoped>
.ensureAccountContainer {
  // border: 1px solid #000;
  box-shadow:
    gray 0px 0px 0px 2px inset,
    rgb(255, 255, 255) 10px -10px 0px -3px,
    rgb(31, 193, 27) 10px -10px,
    rgb(255, 255, 255) 20px -20px 0px -3px,
    rgb(255, 217, 19) 20px -20px;
  width: 50%;
  padding: 10px;
  margin: 5vh auto;
  .el-form {
    // border: 1px solid blue;
    .el-form-item {
      margin: 20px 0;
      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
